<template>
  <div class="hot">
    <div class="cover">
        <div>
          <div>
            <div class="cover-name"></div>
            <div v-if="hotInfo" class="date">
              <!-- 时间列表 -->
              更新日期:&nbsp;{{hotInfo.updateTime|formatDate("m月d日")}}
              <!-- 播放全部 -->
              <div class="play-all" @click="$emit('playall',hotSong)">
                <i></i>
              </div>
            </div>
          </div>
        </div>
        <div class="mask"></div>
    </div>
    <!-- 歌曲组件传值 -->
    <song-list @play="$emit('play',$event)" :shownumber="true" v-if="showSong.length>0" :songlist="showSong"></song-list>
    <music-loading v-else></music-loading>
    <div v-show="showSong.length>0" class="more" @click="loadMore" ref="more">
      {{page>=10?"没有更多了":"点击加载更多"}}
    </div>
  </div>
</template>
<script>
import SongList from '@/components/SongList'
import MusicLoading from '@/components/MusicLoading'
export default {
  data(){
    return {
      hotInfo:null,//null=>false
      hotSong:[],
      page:1
    }
  },
  created(){
    this.getHotInfo();//获取热歌榜信息异步函数
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      window.addEventListener("scroll",vm.scrollbar);
    });
  },
  beforeRouteLeave(to,from,next){
    window.removeEventListener("scroll",this.scrollbar);//离开当前路由移除scroll事件
    next();
  },
  methods:{
    async getHotInfo(){//获取热歌榜信息
      let re=await this.axios.get("/playlist/detail?id=3778678");
          this.hotInfo=re.playlist;
          let hotSong=re.playlist.tracks;
          this.hotSong=hotSong.map((song,index)=>{
            song.song={
              artists:song.ar,//转化歌手信息
              privilege:re.privileges[index],//转化码率
              album:song.al //转化专辑
            }
            return song;
          });
    },
    loadMore(){
      if(this.page>=10){
        return;
      }
      this.page++;//下一页
    },
    scrollbar(){
      let el=document.documentElement||document.body;
      let top=el.scrollTop+el.clientHeight;
      let moretop=this.$refs.more.offsetTop;
      if(top>=moretop+40){
        console.log("触底了....");
        this.loadMore();
      }
    }
  },
  computed:{
    showSong(){
      return this.hotSong.slice(0,20*this.page);
    }
  },
  components:{
    SongList,
    MusicLoading
  }
}
</script>
<style lang="less" scoped>
.hot{
  .cover{
    height:21vh;//视图高度分为100份  100vh
    background:url(../assets/hot_music_bg_2x.jpg) no-repeat left top;
    background-size: cover;
    
    position: relative;
    &>div{
       position: absolute;
       width:100%;
       height:100%;
       left:0;
       top:0;
      
      z-index:2;
      display: flex;
      align-items: center;
      &>div{
        flex:1;
        padding-left:20px;
      }
      .cover-name{
        width:100%;
        height:10vh;
        background:url(../assets/index_icon_2x.png) no-repeat -24px -30px;
        background-size: 166px 97px; //332 X 194 缩小背景图片
      }
      .date{
        font-size:12px;
        margin-top:10px;
        color:white;
        position: relative;
        // 全部
        .play-all{
          width: 20px;
          height: 20px;
          position: absolute;
          top: -7px;
          right: 40px;
          &>i{
            width: 100%;
            height: 100%;
            display: inline-block;
            background: url("../assets/全部.svg") no-repeat;
            background-size: cover;
          }
        }
      }
    }
    &>div.mask{
      background:rgba(0,0,0,0.2);
      z-index:1;
    }
  }
  .more{
    text-align: center;
    line-height: 40px;
    font-size:13px;
    color:#666;
  }
}
</style>
